<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../assert/js/vue2.js"></script>

    <script src="../assert/js/axios.js"></script>

    <link rel="stylesheet" href="../assert/element-ui/lib/theme-chalk/index.css">

    <script src="../assert/element-ui/lib/index.js"></script>
</head>
<style>

    .el-table, .el-table__expanded-cell{
        background-color: transparent;
    }
    /* 表格内背景颜色 */
    .el-table th,
    .el-table tr,
    .el-table td {
        background-color: transparent;
        color:white
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
<body>

<div id = "pigApp" >

    <el-row>
        <el-col :span="2">
            <el-button  @click="dialogFormVisible = true" type="info">新增</el-button>
        </el-col>

        <el-col :span="4">
            <el-input
                    placeholder="请输入订单号"
                    v-model="orderNum">
                <i slot="prefix" class="el-input__icon el-icon-search" @click="initPage(1)"></i>
            </el-input>
        </el-col>
        <el-button  @click="initPageByType(0)" type="info">切换到已出栏猪</el-button>
        <el-button  @click="initPageByType(1)" type="primary">切换到未出栏</el-button>
    </el-row>

    <template>
    <el-table
            :data="tableData"
            border
            style="width: 100%;">
        <el-table-column
                prop="updateTime"
                label="最近一次更新时间"
                width="150">
        </el-table-column>
        <el-table-column
                prop="name"
                label="名称"
                width="150">
        </el-table-column>
        <el-table-column
                label="性别"
                width="200">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{scope.row.gender==='1'?'雄性':'雌性'}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="照片"
                width="150">
            <template slot-scope="{ row }">
                <el-image style="width: auto; height: 40px; border:none;cursor: pointer;"
                          :src="getImage(row.imageName)"
                          :preview-src-list="[ `/common/download?name=${row.image}` ]" >
                    <div slot="error" class="image-slot">
                        <img src="../images/noImg.png" style="width: auto; height: 40px; border:none;" >
                    </div>
                </el-image>
            </template>
        </el-table-column>
        <el-table-column
                prop="age"
                label="当前年龄(月)-若为<0请检查"
                width="180">
        </el-table-column>
        <el-table-column
                prop="saveTime"
                label="登记日期"
                width="200">
        </el-table-column>
        <el-table-column
                prop="orderNum"
                label="订单号"
                width="200">
        </el-table-column>
        <el-table-column
                prop="description"
                label="描述"
                width="300">
        </el-table-column>

        <el-table-column
                label="操作"
                width="130">
            <template slot-scope="scope">
                <el-button type="text" size="small" @click="handlerEdit(scope.row.id)">编辑</el-button>
                <el-button v-if="scope.row.status" type="warning" size="small" @click="removePig(scope.row.id)">出栏</el-button>
                <el-button v-else="scope.row.status" type="warning" size="small" @click="removePig(scope.row.id)">编辑订单号</el-button>
            </template>
        </el-table-column>
    </el-table>
        <el-pagination
                class="pageList"
                :page-sizes="[5, 10, 20, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="counts"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"

        ></el-pagination>
    </template>



    <el-dialog title="出栏设置" :visible.sync="dialogRemovePig">
        <template>
            <el-select v-model="removePigTable.orderNum" placeholder="请选择">
                <el-option
                        v-for="item in options"
                        :value="item">
                </el-option>
            </el-select>
        </template>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogRemovePig = false">取 消</el-button>
            <el-button type="primary" @click="salePig()">确 定</el-button>
        </div>
    </el-dialog>



    <el-dialog title="猪种信息" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
                <el-select v-model="form.gender" placeholder="请选择活动区域">
                    <el-option label="雄性" value="1"></el-option>
                    <el-option label="雌性" value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="出生日期" :label-width="formLabelWidth">
                <el-date-picker
                        v-model="form.birth"
                        type="date"
                        placeholder="选择猪的出生日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="描述" :label-width="formLabelWidth">
                <el-input v-model="form.description" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="图片" :label-width="formLabelWidth">
                <el-upload
                        class="avatar-uploader"
                        action="/common/uploadImg"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                        ref="uploadImg"
                >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addOrUpdatePig()">确 定</el-button>
        </div>
    </el-dialog>
</div>

<script>

    new Vue({
        el:"#pigApp",
        data() {
            return {
                tableData: [],
                form: {
                   name:'',
                   gender:'',
                   birth:'',
                   description:'',
                   imageName:'',
                    status:''
                },
                orderNum:'',
                options:[],
                removePigTable:[],
                dialogFormVisible: false,
                dialogRemovePig : false,
                input: '', // 输入跳转到哪一页
                counts: 0, // 总共多少数据
                page: 1,// 当前是多少页
                pageSize: 5, // 每页多少数据
                formLabelWidth: "120px",
                imageUrl: '',
                pigStatus:'1',

            }
        },
        methods: {
            handleClick(row) {
                console.log(row);
            },
            addOrUpdatePig(){
                var _this = this;
                if (_this.form.id === undefined){
                    axios.post("/pig",_this.form).then(function (resp) {
                        if (resp.data.code === 1) {
                            _this.$message.success(resp.msg);
                        }else{
                            _this.$message.error(resp.msg);
                        }
                    })
                }else {
                    axios.put("/pig",_this.form).then(function (resp) {
                        if (resp.data.code === 1) {
                            _this.$message.success(resp.msg);
                        }else{
                            _this.$message.error(resp.msg);
                        }
                    })
                }
                _this.dialogFormVisible = false;
                _this.initPage();
                for(let i in _this.form){
                    _this.form[i] = "";
                }

            },
            handlerEdit(id){
                var _this = this;
                axios.get("/pig/getById?id=" + id).then(function (resp) {
                    _this.form = resp.data.data;
                })
                _this.dialogFormVisible = true;
            },
            getOrderData(){
                var _this = this;
                axios.get("/order/getOrderNum").then(function (resp) {
                    _this.options = resp.data.data;
                })
            },
            removePig(id){
                this.getOrderData();
                var _this = this;
                _this.dialogRemovePig = true;
                axios.get("/pig/getById?id="+id).then(function (resp){
                    _this.removePigTable = resp.data.data;
                })

            },
            salePig(){
                var _this = this;
                _this.removePigTable.status = 0;
                axios.put("/pig/sale",this.removePigTable).then(function (resp) {
                    _this.$message.info(resp.data.msg);
                    _this.dialogRemovePig = false;
                    _this.initPage();
                })
            },

            getImage (imageName) {
                return '/common/download?name='+imageName
            },

            //
            initPageByType(status){
                this.pigStatus = status;
                this.initPage(status);
            },
            initPage(status) {
                var _this = this;
                for(let i in _this.form){
                    _this.form[i] = "";
                }
                axios.get("/pig/page?page="+this.page+"&pageSize="+this.pageSize+"&status="+this.pigStatus + "&orderNum=" + this.orderNum).then(function (resp) {
                    _this.tableData = resp.data.data.records || []
                    _this.counts = resp.data.data.total
                    if (resp.data.code != 1)
                        _this.$message.error("接口错误")


                })
            },
            handleSizeChange (val) {
                this.pageSize = val
                this.initPage(1)
            },
            handleCurrentChange (val) {
                this.page = val
                this.initPage(1)
            },

            handleAvatarSuccess (response, file, fileList) {
                this.form.imageName = response.data;
                this.imageUrl = '/common/download?name='+response.data
                console.log(this.imageUrl);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 10;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 10MB!');
                }
                return isJPG && isLt2M;
            }
        },
        created(){
            this.initPage(1);


        }


    })
</script>
</body>
</html>